<template>
  <div
    v-ui-ref="vSetRef"
    class="relative flex flex-col ui-flexbox"
    :class="[
      'p-' + info.extension.padding.value,
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
      info.extension.shadow.value,
      info.extension.border.value,
      info.extension.rounded.value,
      info.extension.bg.value,
    ]"
    :style="{
      background: `url('${info.extension.backgroundImg.value}')`,
      height: info.extension.showAuto?.value ? `${info.extension.autoHeight?.value}px` : `${info.extension.boxHeight.value}vh`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      backgroundColor: info.extension.backgroundColor.value,
      borderRadius: info.extension.cardBorderRadius?.value + 'px',
      border: `${info.extension.showBorder?.value ? info.extension.cardBorderWidth?.value : '0'}px ${info.extension.cardBorderType?.value} ${
        info.extension.cardBordercolor?.value
      }`,
    }"
  >
    <!-- v-if="info.extension.showTimeRange.value" -->
    <div v-if="info.extension.showTimeRange?.value" class="absolute" style="top: 15px; right: 5px">
      <el-date-picker
        v-model="text"
        class="absolute"
        format="YYYY/MM/DD HH:mm:ss"
        popper-class="popperClassChartCard"
        range-separator="-"
        style="width: 200px"
        type="datetimerange"
        value-format="YYYY/MM/DD HH:mm:ss"
        @change="changeDate"
      />
    </div>
    <div
      v-if="info.extension.showBrage.value"
      class="absolute top-0 left-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-top-left-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorLeftTop.value}; border-top-width: ${info.extension.borderWidth.value}px; border-left-width: ${info.extension.borderWidth.value}px`"
    ></div>
    <div
      v-if="info.extension.showBrage.value"
      class="absolute right-0 top-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-top-right-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorRightTop.value};border-top-width: ${info.extension.borderWidth.value}px; border-right-width: ${info.extension.borderWidth.value}px`"
    ></div>
    <div
      v-if="info.extension.showBrage.value"
      class="absolute left-0 bottom-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-bottom-left-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorLeftBottom.value};border-bottom-width: ${info.extension.borderWidth.value}px; border-left-width: ${info.extension.borderWidth.value}px`"
    ></div>
    <div
      v-if="info.extension.showBrage.value"
      class="absolute right-0 bottom-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-bottom-right-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorRightBottom.value};border-bottom-width: ${info.extension.borderWidth.value}px; border-right-width: ${info.extension.borderWidth.value}px`"
    ></div>
    <div
      v-if="info.extension.showTitle.value"
      class="flex align-center"
      :class="['justify-' + info.extension.labeljustifyAlign.value, 'items-' + info.extension.labelitemsAlign.value]"
      :style="{
        height: `${info.extension.titleHeight.value}px`,
        margin: `${info.extension.titleTopMargin.value}px ${info.extension.titleRightMargin.value}px ${info.extension.titleBottomMargin.value}px ${info.extension.titleLeftMargin.value}px`,
        padding: `${info.extension.titleTopPadding.value}px ${info.extension.titleRightPadding.value}px ${info.extension.titleBottomPadding.value}px ${info.extension.titleLeftPadding.value}px`,
        fontSize: `${info.extension.titleFontSize.value}px`,
        color: `${info.extension.titleColor.value}`,
        fontWeight: `${info.extension.titleFontWeight.value}`,
        backgroundColor: `${info.extension.titleBgColor.value}`,
        borderRadius: `${info.extension.titleRadius.value}px`,
        backgroundImage: `url('${info.extension.titleBackgroundImg.value}')`,
        backgroundPosition: info.extension.backgroundPosition?.value || 'center' + ' center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: info.extension.backgroundSize.value,
        borderBottom: `${info.extension.showBorder?.value ? info.extension.cardBorderWidth?.value : '0'}px ${info.extension.cardBorderType?.value} ${
          info.extension.cardBordercolor?.value
        }`,
      }"
    >
      {{ info.extension.title.value }}
    </div>
    <div class="flex-1 w-full">
      <Widget
        class="flex"
        :class="['justify-' + info.extension.justifyAlign.value, 'flex-' + info.extension.flexDer.value]"
        :list="info.list"
        :style="{
          alignItems: info.extension.itemsAlign.value,
        }"
      />
    </div>
  </div>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiChartCard',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        text: '',
      }
    },
    mounted() {
      this.info.interaction = []
    },
    methods: {
      changeDate(e) {
        console.log(e)
        this.setPageModulesState('value', this.text)
        console.warn('this.formDataModel', this.text)
        // 调用 change 事件
        this.onChange()
      },
    },
  })
</script>
<style lang="scss">
  .uiChartCard {
    width: 100%;
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner,
    input {
      background: #00294f !important;
    }
  }
  .popperClassChartCard {
    .el-picker-panel,
    .el-time-spinner,
    .el-time-panel__footer,
    .el-picker-panel__footer {
      background: #00294f !important;
      .el-date-table td.in-range .el-date-table-cell {
        background: #00325d !important;
      }
      .el-input__inner {
        background: #00294f !important;
      }
      color: rgba(255, 255, 255, 0.643);
    }
    .el-time-panel__btn,
    .el-time-spinner__item.active {
      color: #ccc;
    }
  }
</style>
